<template>
  <div class="q-pa-md q-gutter-sm">
    <t-btn
      no-caps
      push
      color="primary"
      label="List BottomSheet"
      @click="show()"
    />
    <t-btn
      no-caps
      push
      color="white"
      text-color="primary"
      label="Grid BottomSheet"
      @click="show(true)"
    />
  </div>
</template>

<script>
  import { useQuasar } from '@teld/q-components';

  export default {
    setup() {
      const $q = useQuasar();

      function show(grid) {
        $q.bottomSheet({
          message: 'Bottom Sheet message',
          grid,
          actions: [
            {
              label: 'Drive',
              img: 'https://cdn.quasar.dev/img/logo_drive_128px.png',
              id: 'drive',
            },
            {
              label: 'Keep',
              img: 'https://cdn.quasar.dev/img/logo_keep_128px.png',
              id: 'keep',
            },
            {
              label: 'Google Hangouts',
              img: 'https://cdn.quasar.dev/img/logo_hangouts_128px.png',
              id: 'calendar',
            },
            {
              label: 'Calendar',
              img: 'https://cdn.quasar.dev/img/logo_calendar_128px.png',
              id: 'calendar',
            },
            {},
            {
              label: 'Share',
              icon: 'share',
              id: 'share',
            },
            {
              label: 'Upload',
              icon: 'cloud_upload',
              color: 'primary',
              id: 'upload',
            },
            {},
            {
              label: 'John',
              avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
              id: 'john',
            },
          ],
        })
          .onOk(action => {
            // console.log('Action chosen:', action.id)
          })
          .onCancel(() => {
            // console.log('Dismissed')
          })
          .onDismiss(() => {
            // console.log('I am triggered on both OK and Cancel')
          });
      }

      return { show };
    },
  };
</script>
